import React from 'react';
import { Checkbox, Spin } from 'antd';
import { getLabel } from '@/common/request/formatter';
import { capacityTypeList } from '@/types/constant/datasource';
import { getDateMinute } from '@/utils';
import language from "@/locales/zh_cn";

interface Props {
  orderLoading: boolean;
  activeIndex: number;
  batchOrderList: any[];
  setActiveIndex: (index: number) => void;
}

const BatchList: React.FC<Props> = ({
  orderLoading, activeIndex, batchOrderList, setActiveIndex
}) => {
  // const language = useLanguage();

  const renderApsCapacity = (order: any) => {
    const { capacity, aps_user_num, aps_user_name, aps_station_num, aps_device_num, aps_line_num } = order;
    let label: string;
    let value: string;
    switch (capacity) {
      case 4: label = '推荐人：';value = aps_user_num ? `${aps_user_num}（${aps_user_name}）` : '';break;
      case 1:
      case 3: label = '推荐工位：';value = aps_station_num;break;
      case 2: label = '推荐设备';value = aps_device_num;break;
      case 5: label = '推荐产线：';value = aps_line_num;break;
      default: return undefined;
    }
    return (
      <div className="line line1" title={value}>
        <span className="label">{label}</span>
        <span className="value">{value}</span>
      </div>
    );
  };

  return (
    <div className="batch-list h100 p-4" style={{maxHeight: '100vh', overflowY: 'auto'}}>
      <Spin spinning={orderLoading} tip={language.loading}>
        {batchOrderList?.map((order: any, index: number) => {
          const isActive = activeIndex === index;

          return (
            <div
              key={order.id}
              className={`order-item relative mb-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200${isActive ? ' active border-2 border-blue-500' : ' border border-gray-200'}`}
              onClick={() => {
                setActiveIndex(index);
              }}
            >
              {isActive && <Checkbox className="active-check absolute right-4 top-4" checked />}
              <div className="order-item-color absolute left-0 top-0 bottom-0 w-2 rounded-l-lg" style={{ backgroundColor: order.process_color }}></div>
              <div className="p-4 pl-6">
                <div className="line mb-3">
                  <span className="label text-gray-500">{language.mbom_num}：</span>
                  <span className="value font-medium">{order.mbom_num}</span>
                </div>
                <div className="line mb-3">
                  <span className="label text-gray-500">{language.process_num}：</span>
                  <span className="value">{order.process_num}</span>
                </div>
                <div className="line mb-3" title={order.process_name}>
                  <span className="label text-gray-500">{language.process_name}：</span>
                  <span className="value line1">{order.process_name}</span>
                </div>
                <div className="line mb-3">
                  <span className="label text-gray-500">{language.capacity_type}：</span>
                  <span className="value">{getLabel(order.capacity, capacityTypeList)}</span>
                </div>
                <div className="line mb-3">
                  <span className="label text-gray-500">推荐派工时间：</span>
                  <span className="value">{getDateMinute(order.aps_start)} ~ {getDateMinute(order.aps_end)}</span>
                </div>
                <div className="line mb-3">
                  <span className="label text-gray-500">实际派工时间：</span>
                  <span className="value">{order.aps_start && getDateMinute(order.aps_start)} ~ {order.aps_end && getDateMinute(order.aps_end)}</span>
                </div>
                {renderApsCapacity(order)}
              </div>
            </div>
          );
        })}
      </Spin>
    </div>
  );
};

export default BatchList;